<template>
  <div class="CardIndex_container">
    <div class="banner"></div>
    <div class="title">我的卡包</div>
    <div class="card">
      <div class="list">
        <template>
          <div class="item" v-for="item in data" :key="item.id">
            <div class="avavar">
              <van-icon name="vip-card-o" />
            </div>
            <div class="userInfo">
              <div class="name">{{ item.name }}</div>
              <div class="time">办理周期：{{ item.shijian }}</div>
              <div class="price">余额：{{ item.price }}</div>
            </div>
          </div>
        </template>
      </div>
      <div class="button" @click="$router.push('/addCard')">办理卡片</div>
    </div>
  </div>
</template>

<script>
import { getCardList } from "@/api";
import dayjs from 'dayjs'
export default {
  name: 'CardIndex',
  components: {},
  props: {},
  data() {
    return {
      data: []
    }
  },
  computed: {

  },
  watch: {},
  created() { },
  mounted() {
    this.getDataList()
    console.log()
  },
  methods: {
    formatTime(time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    async getDataList() {
      try {
        const res = await getCardList(this.$store.getters.userInfo.id)
        this.data = res.data
      } catch (error) {
        console.log(error)
      }

    }
  }
}
</script>
<style scoped lang='less'>
.CardIndex_container {
  height: 100vh;

  .banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: -1;
    height: 200px;
  }

  .banner::after {
    height: 200px;
    content: '';
    width: 200%;
    position: absolute;
    left: -50%;
    top: 0;
    z-index: -1;
    border-radius: 0 0 50% 50%;
    background-image: url('../../assets/image/WechatIMG196.jpg');
    background-size: cover;
  }

  .title {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
  }

  .card {
    width: 100%;
    height: calc(100vh - 150px);
    background-color: #fff;
    position: absolute;
    top: 150px;
    left: 0;
    border-radius: 30px 30px 0 0;

    .list::-webkit-scrollbar {
      display: none;
    }

    .list {
      -ms-overflow-style: none;
    }

    .list {
      width: 80%;
      height: 70%;
      margin: 0 auto;
      margin-top: 50px;
      overflow: auto;
      scrollbar-width: none;

      .item {
        width: 100%;
        height: 80px;
        background-color: #ECF3F2;
        border-radius: 15px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;

        .avavar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          color: #438883;
          background-color: #fff;
          text-align: center;
          line-height: 50px;
          margin: 0 20px;
        }

        .userInfo {
          color: #438883;
          font-size: 10px;
          font-weight: 700;
          height: 55px;
          flex-direction: column;
          justify-content: space-between;
          display: flex;

          .name {
            font-size: 16px;
          }
        }
      }

      .item:last-child {
        margin-bottom: 10px;
      }
    }

    .button {
      text-align: center;
      font-size: 16px;
      line-height: 40px;
      width: 80%;
      margin: 0 auto;
      margin-top: 10px;
      height: 40px;
      border-radius: 30px;
      border: 1px solid #438883;
      color: #438883;
      font-weight: 700;
    }
  }
}
</style>
